import { useSessionStorageState } from 'ahooks'
import _ from 'lodash'
import dayjs from 'dayjs'
import { Button, Col, DatePicker, Input, Row, Select, Space } from 'antd'
import { DownOutlined } from '@ant-design/icons'

import { TextAreaFilter } from '@/components/TextAreaFilter'
import { selectFilterOption } from '@/utils/utils'
import { useBusinessUsers } from '@oBiz/hooks/SWRApi/useBusinessUsers'
import { useEnterpriseConnectors } from '@oBiz/hooks/SWRApi/useEnterpriseConnectors'
import { defaultParams, useBoundStore } from './store'
import styles from './styles.module.less'

export const FilterOMS = () => {
  const reqData = useBoundStore(v => v.reqData)
  const setReqData = useBoundStore(v => v.setReqData)
  const getData = useBoundStore(v => v.getData)

  const [open, setOpen] = useSessionStorageState(`fba_${$APP}_bizTrackOrderFilterOpen`, { defaultValue: false })
  const enterpriseConnectorsRes = useEnterpriseConnectors()
  const businessUsersRes = useBusinessUsers()

  const handleQuery = () => {
    setReqData({ page: 1 })
    getData(true)
  }

  const getBtns = (span: number) => (
    <Col span={span} className={styles.Filter_btns}>
      <Space size={4}>
        <Button
          onClick={() => {
            setReqData({ ..._.omit(defaultParams, ['size']), page: 1 })
            getData(true)
          }}
        >
          重置
        </Button>
        <Button type="primary" onClick={handleQuery}>
          查询
        </Button>
        <Button type="link" onClick={() => setOpen(!open)}>
          {open ? '收起' : '展开'}
          <DownOutlined rotate={open ? 180 : 0} />
        </Button>
      </Space>
    </Col>
  )

  return (
    <Row gutter={[20, 10]}>
      <Col span={6}>
        <div className={styles.Filter_item}>
          <span>运单号</span>
          <TextAreaFilter
            placeholder="请输入运单号"
            textAreaPlaceholder="多个运单号请换行"
            value={reqData.waybillNos}
            onChange={waybillNos => setReqData({ waybillNos })}
          />
        </div>
      </Col>
      <Col span={6}>
        <div className={styles.Filter_item}>
          <span>客户</span>
          <Select
            placeholder="请选择客户"
            allowClear
            showSearch
            loading={enterpriseConnectorsRes.loading}
            options={enterpriseConnectorsRes.data?.list.map(d => ({ label: d.$showName, value: d.id }))}
            filterOption={selectFilterOption}
            value={reqData.enterpriseConnectorId}
            onChange={v => setReqData({ enterpriseConnectorId: v ?? undefined })}
          />
        </div>
      </Col>
      <Col span={6}>
        <div className={styles.Filter_item}>
          <span>FBAID</span>
          <Input
            placeholder="请输入FBAID"
            allowClear
            value={reqData.fbaId}
            onChange={e => setReqData({ fbaId: e.target.value || undefined })}
            onPressEnter={handleQuery}
          />
        </div>
      </Col>
      {!open && getBtns(6)}

      {open && (
        <>
          <Col span={6}>
            <div className={styles.Filter_item}>
              <span>人员</span>
              <Select
                placeholder="请选择人员"
                allowClear
                mode="multiple"
                maxTagCount={1}
                showSearch
                loading={businessUsersRes.loading}
                options={businessUsersRes.data?.list.map(d => ({ label: d.name || d.englishName, value: d.id }))}
                filterOption={selectFilterOption}
                value={reqData.businessUserIds}
                onChange={v => setReqData({ businessUserIds: v.length > 0 ? v : undefined })}
              />
            </div>
          </Col>
          <Col span={6}>
            <div className={styles.Filter_item}>
              <span>预计签收日期</span>
              <DatePicker.RangePicker
                format="YYYY-MM-DD"
                value={
                  reqData.predictSignStart && reqData.predictSignEnd
                    ? [dayjs(reqData.predictSignStart), dayjs(reqData.predictSignEnd)]
                    : undefined
                }
                onChange={(_dates, dateStrs) =>
                  setReqData({
                    predictSignStart: dateStrs[0] || undefined,
                    predictSignEnd: dateStrs[1] || undefined,
                  })
                }
              />
            </div>
          </Col>
          <Col span={6}>
            <div className={styles.Filter_item}>
              <span>实际DW</span>
              <DatePicker
                value={reqData.dwPredictSignTime ? dayjs(reqData.dwPredictSignTime) : undefined}
                onChange={(_dates, dateStr) => setReqData({ dwPredictSignTime: `${dateStr}` || undefined })}
              />
            </div>
          </Col>
          {getBtns(12)}
        </>
      )}
    </Row>
  )
}
